/*
 * @Author: Otway
 * @Date: 2019-01-09 11:16:08
 * @LastEditors: Otway
 * @LastEditTime: 2019-08-30 18:50:09
 * @copyright: h-visions
 */
import React, { PureComponent } from 'react';
import { baseUrl } from '../../config'
import { BasicPagination, isInvalidObject, TableCustomize, openSuccessModal, openModalMessage, compareDate, compareString } from '../../components/TableCustomize'
import {
  Row,
  Col,
  Form,
  Input,
  DatePicker,
  Upload,
  Icon,
  Button,
  message
} from 'antd';
const FormItem = Form.Item;
const formItemLayout = {
  // 抽屉里面Form。二列的布局比例
  labelCol: {
    span: 6
  },
  wrapperCol: {
    span: 18
  }
};

class AddFrom2 extends PureComponent {
  state = { file: {}, fileList: [] }
  changModel = (e) => {
    const {
      form: { getFieldsValue },
      onchangModel
    } = this.props;

    if (onchangModel) {
      onchangModel(getFieldsValue());
    }
  };
  render() {
    const {
      formData,
      operateType,
      saveFileList,
      form: { getFieldDecorator },
    } = this.props;
    const { fileList } = this.state
    const accept = {
      accept: ".xlsx,.xls,.doc,.docx",
    };
    const propsFile = {
      name: 'file',
      action: `${baseUrl}/lw-mes-file/file/uploadFile`,
      headers: {
        userId: localStorage.getItem('userId'),
        Token: localStorage.getItem('token'),
      },
      ...accept,
      onRemove: (file) => {
        this.setState((state) => {
          const index = state.fileList.indexOf(file);
          const newFileList = state.fileList.slice();
          newFileList.splice(index, 1);
          saveFileList(0, newFileList);
          return {
            fileList: newFileList,
          };
        });
      },
      // 获取到上传的图片信息
      onChange(info) {
        if (info.file.status !== 'uploading') {
          console.log(info.file, info.fileList);
        }
        if (info.file.status === 'done') {
          console.log('info.file', info.file)
          // message.success(`${info.file.name} file uploaded successfully`);
        } else if (info.file.status === 'error') {
          // message.error(`${info.file.name} file upload failed.`);
        }
      },
      beforeUpload: (file) => {
        saveFileList(0, [...fileList, file]);
        this.setState((state) => ({
          fileList: [...state.fileList, file],
        }));
        return false;
      },
      // 按住ctrl多选上传
      // multiple: true,
      fileList,
    }
    return (
      <Form >
        <Row>
          <Col span={24}>
            <FormItem {...formItemLayout} label={'协议名称'}>
              {getFieldDecorator('agreementName', {
                initialValue: formData.agreementName || '',
                rules: [
                  {
                    required: true,
                    message: '请选择协议名称'
                  }
                ]
              })(<Input />)}
            </FormItem>
          </Col>
          <Col span={24}>
            <FormItem {...formItemLayout} label={'批号'}>
              {getFieldDecorator('batchNo', {
                initialValue: formData.batchNo || '',
                rules: [
                  {
                    required: true,
                    message: '请选择批号'
                  }
                ]
              })(<Input disabled />)}
            </FormItem>
          </Col>
          <Col span={24}>
            <FormItem {...formItemLayout} label={'机型'}>
              {getFieldDecorator('productModelName', {
                initialValue: formData.productModelName || '',
                rules: [
                  {
                    required: true,
                    message: '请选择机型'
                  }
                ]
              })(<Input disabled onClick={this.changModel} />)}
            </FormItem>
          </Col>
          <Col span={24}>
            <FormItem {...formItemLayout} label={'协议上传'}>
              {getFieldDecorator('fileId', {
                initialValue: formData.fileId || '',
                rules: [
                  {
                    required: true,
                    message: '请上传协议'
                  }
                ]
              })(<div>
                {/* <Upload {...propsFile}>
                  <Button >
                    <Icon type="upload" /> 上传文件
                  </Button>
           
                </Upload> */}
              </div>)}
            </FormItem>
          </Col>


        </Row>
        {/* <FormItem style={{ visibility: 'hidden' }}>
          {getFieldDecorator('fileId', {
            initialValue: formData?.fileId || null,
          })(
            <Input />
          )}
        </FormItem> */}
        <FormItem style={{ visibility: 'hidden' }}>
          {getFieldDecorator('acceptanceCheckId', {
            initialValue: formData?.id || null,
          })(
            <Input />
          )}
        </FormItem>
        <FormItem style={{ visibility: 'hidden' }}>
          {getFieldDecorator('productModel', {
            initialValue: formData?.productModel || null,
          })(
            <Input />
          )}
        </FormItem>
      </Form>
    );
  }
}

export default Form.create()(AddFrom2);
